<template>
  <div class="interface-manager">
    <el-row>
      <!--分组管理-->
      <el-col :span="5">
        <group v-on:listenTochildEvent="getApi"></group>
      </el-col>
      <!--接口管理-->
      <el-col :span="19">
        <div class="interface-addInterface">
          <h3 class="interface-title">接口数：( {{interfaceList.params.interfaceCount}} ) 个</h3>
          <addInterface v-on:listenTochildEvent="getApi"></addInterface>

          <el-table :data="interfaceList.list" stripe border class="" style="width: 99%;margin:3px" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'bold','color':'#272626','heigth':'39px'}">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="id" sortable label="编号" width="80">
            </el-table-column>
            <el-table-column prop="name" sortable label="接口名" width="220">
            </el-table-column>
            <el-table-column prop="path" sortable label="路径" width="220">
              <template slot-scope="scope">
                <span>
                  <el-tag v-if="scope.row.method =='GET'" size="small">{{scope.row.method}}</el-tag>
                  <el-tag v-if="scope.row.method =='POST'" size="small" type="success">{{scope.row.method}}</el-tag>
                  <el-tag v-if="scope.row.method =='DELETE'" size="small" type="danger">{{scope.row.method}}</el-tag>
                  <el-tag v-if="scope.row.method =='PUT'" size="small" type="warning">{{scope.row.method}}</el-tag>
                  <span style="letter-spacing: 0.3px;color: #20a0ff">
                    <router-link :to="{path:`/env/manager`}">{{scope.row.path}}</router-link>
                  </span>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="author" label="添加人" width="150">
            </el-table-column>
            <el-table-column prop="updateTime" sortable label="更新时间" width="300">
              <template slot-scope="scope">
                <i class="el-icon-time" style="margin-right: 5px"></i>{{scope.row.updateTime | format}}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="130">
              <template slot-scope="scope">
                <!--点编辑，跳转到接口详情页面-->
                <router-link :to="{  path:`/interface/${scope.row.id}`, params: {interface_id: scope.row.id}}">
                  <el-button type="text" size="mini" class="interface-manager-button" circle>编辑</el-button>
                </router-link>
                <el-button type="text" size="mini" class="interface-manager-button" style="color:red" circle @click="deleteApi(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div style="margin-top: 50px;float: right">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[50, 100, 150, 200]" :page-size="interfaceList.params.pageSize" @prev-click="prevClickChange" @next-click="nextClickChange" :current-page.sync="interfaceList.params.currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="interfaceList.params.interfaceCount"></el-pagination>
          </div>

        </div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import group from '../group/groupManager'
import addInterface from './addInterface'
import { formatDate } from "@/utils/dataUtil";
import { addApi, getApi, deleteApi, updateApi } from '@/api/api'
export default {
  name: 'interfaceManager',
  data () {
    return {

      projectId: '',
      apiGroupId: '',

      interfaceList: {
        list: [],
        params: {
          interfaceCount: 0,
          currentPage: 1,
          pageSize: 30,
          pageIndex: 1,


        }
      },

    }
  },


  components: {
    group,
    addInterface
  },

  methods: {
    //获取接口信息
    getApi (projectId, apiGroupId, id, pageIndex, pageSize) {
      getApi(projectId, apiGroupId, id, pageIndex, pageSize).then(resp => {
        if (resp.code == 200) {
          this.interfaceList.list = resp.data.records
          this.interfaceList.params.interfaceCount = resp.data.total
          this.interfaceList.params.pageIndex = pageIndex
        }
      })
    },

    deleteApi (id) {
      this.$confirm("此操作将永久删除 『 " + id + " 』 接口, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteApi(id).then(resp => {
          if (resp.code == 200) {
            this.$message({
              message: resp.message,
              type: 'success',
            });
            this.getApi(this.projectId, '', '', this.interfaceList.params.pageIndex, this.interfaceList.params.pageSize)
          }

        })
      });


    },

    //点击上一页
    prevClickChange (val) {
      this.getApi(this.projectId, '', '', val, this.interfaceList.params.pageSize)

    },

    //点击下一页
    nextClickChange (val) {
      this.getApi(this.projectId, '', '', val, this.interfaceList.params.pageSize)
    },

    //大面大小变更
    handleSizeChange (val) {
      this.interfaceList.params.pageSize = val
      this.getApi(this.projectId, '', '', 1, val)
    },
    //跳转
    handleCurrentChange (val) {
      this.getApi(this.projectId, '', '', val, this.interfaceList.params.pageSize)
    }
  },

  filters: {
    format (time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')


    }

  },

  watch: {
    '$store.state.projectId': function () {
      //你需要执行的代码
      console.log(4444444444)
      this.getApi(this.projectId, '', '', this.interfaceList.params.pageIndex, this.interfaceList.params.pageSize)
    }
  },

  mounted () {
    this.projectId = this.$store.state.projectId
    this.getApi(this.projectId, '', '', this.interfaceList.params.pageIndex, this.interfaceList.params.pageSize)

  }
}
</script>

<style scoped>
.interface-manager {
  height: 100%;
}

.interface-manager >>> .el-row {
  height: 100%;
}

.interface-manager >>> .el-col {
  height: 100%;
}

.interface-addInterface {
  background-color: white;
  height: 100%;
  margin-left: 1px;
  margin-top: 2px;
}

.interface-title {
  clear: both;
  font-weight: 400;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  display: inline-block;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.interface-manager >>> .el-table th {
  padding: 3px 0;
}

.interface-manager-button {
  margin-left: 8px !important;
  font-size: 14px;
}
</style>